<template>
 <div class="nb-product-list-main" ref="wrapper">
  <ul style="padding: 12px">
    <router-link
      v-for="item in productList"
      :key="item.id"
      tag="li"
      :to="{
        name: 'product',
        params: {
          id: item.id
        }
      }"
    >
      <img style="max-width: 100%" :src="item.image" :alt="item.title" />
      <p>{{item.title}}</p>
      <mt-button
        type="primary"
        size="small"
        @click.stop="addToCart({
          id: item.id,
          title: item.title,
          price: item.price
        })"
      >加入购物车</mt-button>
    </router-link>
    <li v-if="isEnd">我是有底线的</li>
  </ul>
</div>
</template>

<script>
import {
  mapMutations
} from 'vuex'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      productList: [],
      start: 0,
      isEnd: false
    }
  },
  methods: {
    ...mapMutations([
      'addToCart'
    ]),
    initBScroll () {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      })
      // 下拉
      this.scroll.on('touchEnd', (pos) => {
        if (pos.y > 60) {
          this.getData(true)
        }
      })
      // 上拉
      this.scroll.on('scrollEnd', (pos) => {
        if (pos.y < this.scroll.maxScrollY + 60) {
          this.getData()
        }
      })
    },
    getData (isRefresh = false) {
      const start = isRefresh ? 0 : this.start
      if (this.isEnd && !isRefresh) {
        return
      }
      // 通过路由里面去取id
      this.$ajax.getProductList(this.$route.params.id, start)
        .then(resp => {
          if (resp.data.code === 200) {
            const baseProductList = isRefresh ? [] : this.productList
            // 商品列表
            this.productList = baseProductList.concat(resp.data.data.items.list.filter(item => item.type !== 2))
            // 下次加载下一页所需要的参数
            this.start = resp.data.data.items.nextIndex
            // 是否已经加载完毕
            this.isEnd = resp.data.data.items.isEnd

            this.$nextTick(() => {
              // 如果没有BScroll的实例，才会去做实例的初始化
              if (!this.scroll) {
                this.initBScroll()
              }
            })
          }
        })
    }
  },
  watch: {
    // 第一种方式，可以使用watch去监听路由的变化
    // watch的意思就是只要被监听的那个值有变化，后面的方法会自动执行
    // this. 能获取到的值都可以watch
    // $route() {
    //   this.$ajax.getProductList(this.$route.params.id)
    //     .then(resp => {
    //       console.log(resp)
    //       if (resp.data.code === 200) {
    //         this.productList = resp.data.data.items.list
    //       }
    //     })
    // }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 由于这里没有this, 所以需要传递vm
      vm.getData()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getData(true)
  }
}
</script>

<style>
.nb-product-list-main {
  flex: 1;
  overflow-x: hidden;
}
</style>
